<template>
    <div>
        我是children内容{{ numpro }}
        <!-- <input type="text" v-model="num1" /> -->
        <button @click="sendToParent">子往父传值</button>
        <button @click="updateMessage">修改传递的数据数据{{ value1 }}</button>
        <H2>孙子组件</H2>
        <childrenson></childrenson>
    </div>
</template>

<script>
import childrenson from "./childrenSon.vue";
export default {
    components: {
        childrenson
    },
    props: {
        numpro: {
            type: Number
            // required: true
        },
        value1: {
            type: String,
            default: "老师"
        },
        value2: {
            type: [Boolean, Object],
            default: false
        }
    },
    data() {
        return {
            // num1: 3
        };
    },
    computed: {},
    methods: {
        sendToParent() {
            this.$emit("sendToParent", "我是子组件数据");
        },
        updateMessage() {
            // 这里是单向数据流.不能直接修改
            // this.value1 = "辅导员";
            // 传递到父组件.在父组件中修改
            // this.$emit("changeValue1", "辅导员");
            this.$emit("update:value1", "辅导员");
        }
    },
    beforeCreate() {
        console.log("进入children beforeCreate页面");
    },
    created() {
        // 用来请求数据的
        console.log("进入children created页面");
    },
    beforeMount() {
        console.log("进入children beforeMount");
    },
    mounted() {
        // 操作一些dom元素.或者是初始化一些插件. 这里是dom挂载之后
        console.log("进入children mounted");
    },
    beforeUpdate() {
        console.log("进入children beforeUpdate");
    },
    updated() {
        console.log("进入children updated");
    },
    beforeDestroy() {
        console.log("进入children beforeDestroy");
    },
    destroyed() {
        // 清除一些定时器.或者事件监听.
        console.log("进入children destroyed");
    },
    activated() {
        // keepalive 缓存组件时候.激活状态
    },
    deactivated() {
        // keepalive 缓存组件时候.失去激活状态
    }
};
</script>
<style scoped></style>
